<!--
<template>
  <div class="user-management">
    <a-card title="用户管理" :bordered="false">
      &lt;!&ndash; 搜索栏 &ndash;&gt;
      <div class="search-bar">
        <a-form layout="inline" :model="searchForm">
          <a-form-item label="用户编号">
            <a-input-number
              v-model="searchForm.id"
              placeholder="请输入要搜索的用户编号"
            />
          </a-form-item>
          <a-form-item label="用户名称">
            <a-input
              v-model="searchForm.userName"
              placeholder="请输入要搜索的用户名称"
            />
          </a-form-item>
          <a-form-item label="电话">
            <a-input v-model="searchForm.phone" placeholder="请输入搜索电话" />
          </a-form-item>
          <a-form-item label="邮箱">
            <a-input v-model="searchForm.email" placeholder="请输入搜索邮箱" />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleSearch">搜索</a-button>
            <a-button @click="resetSearch">刷新</a-button>
          </a-form-item>
        </a-form>
      </div>

      &lt;!&ndash; 操作按钮 &ndash;&gt;
      <div class="action-bar">
        <a-button type="primary" @click="showAddModal">
          <template #icon><icon-plus /></template>
          新增用户
        </a-button>
      </div>

      &lt;!&ndash; 用户表格 &ndash;&gt;
      <a-table
        :columns="columns"
        :data="tableData"
        :pagination="pagination"
        :loading="loading"
        @page-change="handlePageChange"
      >
        <template #userAvatar="{ record }">
          <a-avatar :src="record.userAvatar" v-if="record.userAvatar">
            <img alt="avatar" :src="record.userAvatar" />
          </a-avatar>
          <a-avatar v-else>{{ record.userName?.charAt(0) }}</a-avatar>
        </template>

        <template #userRole="{ record }">
          <a-tag :color="record.userRole === 'admin' ? 'arcoblue' : 'green'">
            {{ record.userRole === "admin" ? "管理员" : "普通用户" }}
          </a-tag>
        </template>

        <template #operations="{ record }">
          <a-space>
            <a-button type="text" size="small" @click="showEditModal(record)"
              >修改</a-button
            >
            <a-popconfirm
              content="确认删除该用户?"
              type="warning"
              @ok="handleDelete(record.id)"
            >
              <a-button type="text" size="small" status="danger">删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-card>

    &lt;!&ndash; 添加用户模态框 &ndash;&gt;
    <a-modal
      v-model:visible="addModalVisible"
      title="新增用户"
      :mask-closable="false"
      @ok="handleAddSubmit"
      @cancel="resetAddForm"
    >
      <a-form :model="addForm" ref="addFormRef" :rules="formRules">
        <a-form-item label="账号" field="userAccount" required>
          <a-input v-model="addForm.userAccount" placeholder="请输入账号" />
        </a-form-item>
        <a-form-item label="密码" field="userPassword" required>
          <a-input-password
            v-model="addForm.userPassword"
            placeholder="请输入密码"
          />
        </a-form-item>
        <a-form-item label="确认密码" field="checkPassword" required>
          <a-input-password
            v-model="addForm.checkPassword"
            placeholder="请再次输入密码"
          />
        </a-form-item>
        <a-form-item label="昵称" field="userName" required>
          <a-input v-model="addForm.userName" placeholder="请输入用户昵称" />
        </a-form-item>
        <a-form-item label="角色">
          <a-select v-model="addForm.userRole">
            <a-option value="user">普通用户</a-option>
            <a-option value="admin">管理员</a-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>

    &lt;!&ndash; 编辑用户模态框 &ndash;&gt;
    <a-modal
      v-model:visible="editModalVisible"
      title="编辑用户"
      :mask-closable="false"
      @ok="handleEditSubmit"
      @cancel="resetEditForm"
    >
      <a-form :model="editForm" ref="editFormRef">
        <a-form-item label="昵称">
          <a-input v-model="editForm.userName" />
        </a-form-item>
        <a-form-item label="头像">
          <a-input v-model="editForm.userAvatar" />
        </a-form-item>
        <a-form-item label="简介">
          <a-textarea v-model="editForm.userProfile" :max-length="200" />
        </a-form-item>
        <a-form-item label="角色">
          <a-select v-model="editForm.userRole">
            <a-option value="user">普通用户</a-option>
            <a-option value="admin">管理员</a-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { Message } from "@arco-design/web-vue";
import {
  listUserByPageUsingPost,
  deleteUserUsingPost,
  addUserUsingPost,
  updateUserUsingPost,
} from "@/api/user";

// 表格列配置
const columns = [
  {
    title: "编号",
    dataIndex: "id",
    width: 100,
  },
  {
    title: "账号",
    dataIndex: "userAccount",
    width: 120,
  },
  {
    title: "名称",
    dataIndex: "userName",
    width: 120,
  },
  {
    title: "头像",
    slotName: "userAvatar",
    width: 80,
  },
  {
    title: "简介",
    dataIndex: "userProfile",
    ellipsis: true,
    tooltip: true,
  },
  {
    title: "电话",
    dataIndex: "phone",
    width: 120,
  },
  {
    title: "邮箱",
    dataIndex: "email",
    width: 180,
  },
  {
    title: "角色",
    slotName: "userRole",
    width: 100,
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    width: 180,
  },
  {
    title: "更新时间",
    dataIndex: "updateTime",
    width: 180,
  },
  {
    title: "操作",
    slotName: "operations",
    width: 120,
    fixed: "right",
  },
];

// 表格数据
const tableData = ref([]);
const loading = ref(false);
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: true,
  showJumper: true,
  showPageSize: true,
});

// 搜索表单
const searchForm = reactive({
  id: undefined,
  userName: "",
  phone: "",
  email: "",
});

// 添加表单
const addModalVisible = ref(false);
const addFormRef = ref(null);
const addForm = reactive({
  userAccount: "",
  userPassword: "",
  checkPassword: "",
  userName: "",
  userRole: "user",
});

// 编辑表单
const editModalVisible = ref(false);
const editFormRef = ref(null);
const editForm = reactive({
  id: undefined,
  userName: "",
  userAvatar: "",
  userProfile: "",
  userRole: "user",
});

// 表单验证规则
const formRules = {
  userAccount: [{ required: true, message: "请输入账号" }],
  userPassword: [{ required: true, message: "请输入密码" }],
  checkPassword: [{ required: true, message: "请确认密码" }],
  userName: [{ required: true, message: "请输入昵称" }],
};

// 加载用户数据
const fetchUserList = async () => {
  try {
    loading.value = true;
    const params = {
      current: pagination.current,
      pageSize: pagination.pageSize,
      ...searchForm,
    };
    const res = await listUserByPageUsingPost(params);
    tableData.value = res.data.records;
    pagination.total = res.data.total;
  } catch (error) {
    Message.error("获取用户列表失败");
  } finally {
    loading.value = false;
  }
};

// 搜索
const handleSearch = () => {
  pagination.current = 1;
  fetchUserList();
};

// 重置搜索
const resetSearch = () => {
  searchForm.id = undefined;
  searchForm.userName = "";
  searchForm.phone = "";
  searchForm.email = "";
  handleSearch();
};

// 分页变化
const handlePageChange = (page) => {
  pagination.current = page;
  fetchUserList();
};

// 显示添加模态框
const showAddModal = () => {
  addModalVisible.value = true;
};

// 提交添加表单
const handleAddSubmit = async () => {
  try {
    await addFormRef.value.validate();
    if (addForm.userPassword !== addForm.checkPassword) {
      Message.error("两次输入的密码不一致");
      return;
    }

    const res = await addUserUsingPost({
      userAccount: addForm.userAccount,
      userPassword: addForm.userPassword,
      checkPassword: addForm.checkPassword,
      userName: addForm.userName,
      userRole: addForm.userRole,
    });

    Message.success("添加成功");
    addModalVisible.value = false;
    fetchUserList();
    resetAddForm();
  } catch (error) {
    if (error.errorFields) {
      Message.error("请填写完整信息");
    } else {
      Message.error(error.message || "添加失败");
    }
  }
};

// 重置添加表单
const resetAddForm = () => {
  addFormRef.value?.resetFields();
};

// 显示编辑模态框
const showEditModal = (record) => {
  editForm.id = record.id;
  editForm.userName = record.userName;
  editForm.userAvatar = record.userAvatar;
  editForm.userProfile = record.userProfile;
  editForm.userRole = record.userRole;
  editModalVisible.value = true;
};

// 提交编辑表单
const handleEditSubmit = async () => {
  try {
    await editFormRef.value.validate();
    await updateUserUsingPost({
      id: editForm.id,
      userName: editForm.userName,
      userAvatar: editForm.userAvatar,
      userProfile: editForm.userProfile,
      userRole: editForm.userRole,
    });

    Message.success("更新成功");
    editModalVisible.value = false;
    fetchUserList();
  } catch (error) {
    Message.error(error.message || "更新失败");
  }
};

// 重置编辑表单
const resetEditForm = () => {
  editFormRef.value?.resetFields();
};

// 删除用户
const handleDelete = async (userId) => {
  try {
    await deleteUserUsingPost({ id: userId });
    Message.success("删除成功");
    fetchUserList();
  } catch (error) {
    Message.error(error.message || "删除失败");
  }
};

// 初始化加载数据
onMounted(() => {
  fetchUserList();
});
</script>

<style scoped>
.user-management {
  padding: 20px;
}
.search-bar {
  margin-bottom: 20px;
}
.action-bar {
  margin-bottom: 16px;
}
</style>
-->
